<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
  <meta name="mobile-web-app-capable" content="yes">

  <title>Fries</title>

  <link rel="shortcut icon" href="favicon.png" />

  <link rel="stylesheet" href="../dist/themes/holo-dark/holo-dark.min.css" />

  <!-- For demo purposes only -->
  <style type="text/css">
  body {
    -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
  }

  h1.intro {
    font-weight: 200;
    margin: 0.2em 0;
  }

  p {
    color: #999;
    margin-bottom: 1em;
  }

  .center-me {
    text-align: center;
  }

  .list i[class*="icon-"] {
    float: left;
    font-size: 36px;
    color: #999;
  }
  .i-class {
    float: left;
    line-height: 36px;
    margin-left: 8px;
  }
  .footnote {
    display: block;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #222;
    font-size: 11px;
  }
  </style>
</head>
<body ontouchstart="">

  <div class="page">
    <header class="action-bar fixed-top">
      <a href="index.html" class="app-icon action up" data-transition="pop">
        <i class="icon-up-button"></i>
        <i class="icon-fries"></i>
      </a>
      <h2 class="title">Fries Components <span class="subtitle">Iconography</span></h2>
    </header>

    <div class="content inset">
      <ul class="list">
        <li class="list-divider">Available Icons</li>
        <li class="list-item-single-line selectable"><i class="icon-back"></i><span class="i-class">icon-back</span></li>
        <li class="list-item-single-line selectable"><i class="icon-accept"></i><span class="i-class">icon-accept</span></li>
        <li class="list-item-single-line selectable"><i class="icon-cancel"></i><span class="i-class">icon-cancel</span></li>
        <li class="list-item-single-line selectable"><i class="icon-chevron-up"></i><span class="i-class">icon-chevron-up</span></li>
        <li class="list-item-single-line selectable"><i class="icon-chevron-down"></i><span class="i-class">icon-chevron-down</span></li>
        <li class="list-item-single-line selectable"><i class="icon-forward"></i><span class="i-class">icon-forward</span></li>
        <li class="list-item-single-line selectable"><i class="icon-chevron-right"></i><span class="i-class">icon-chevron-right</span></li>
        <li class="list-item-single-line selectable"><i class="icon-chevron-left"></i><span class="i-class">icon-chevron-left</span></li>
        <li class="list-item-single-line selectable"><i class="icon-refresh"></i><span class="i-class">icon-refresh</span></li>
        <li class="list-item-single-line selectable"><i class="icon-information"></i><span class="i-class">icon-information</span></li>
        <li class="list-item-single-line selectable"><i class="icon-help"></i><span class="i-class">icon-help</span></li>
        <li class="list-item-single-line selectable"><i class="icon-search"></i><span class="i-class">icon-search</span></li>
        <li class="list-item-single-line selectable"><i class="icon-settings"></i><span class="i-class">icon-settings</span></li>
        <li class="list-item-single-line selectable"><i class="icon-vote-down"></i><span class="i-class">icon-vote-down</span></li>
        <li class="list-item-single-line selectable"><i class="icon-heart"></i><span class="i-class">icon-heart</span></li>
        <li class="list-item-single-line selectable"><i class="icon-star-half"></i><span class="i-class">icon-star-half</span></li>
        <li class="list-item-single-line selectable"><i class="icon-vote-up"></i><span class="i-class">icon-vote-up</span></li>
        <li class="list-item-single-line selectable"><i class="icon-star-full"></i><span class="i-class">icon-star-full</span></li>
        <li class="list-item-single-line selectable"><i class="icon-star-empty"></i><span class="i-class">icon-star-empty</span></li>
        <li class="list-item-single-line selectable"><i class="icon-cloud"></i><span class="i-class">icon-cloud</span></li>
        <li class="list-item-single-line selectable"><i class="icon-folder"></i><span class="i-class">icon-folder</span></li>
        <li class="list-item-single-line selectable"><i class="icon-calendar"></i><span class="i-class">icon-calendar</span></li>
        <li class="list-item-single-line selectable"><i class="icon-tags"></i><span class="i-class">icon-tags</span></li>
        <li class="list-item-single-line selectable"><i class="icon-add-tag"></i><span class="i-class">icon-add-tag</span></li>
        <li class="list-item-single-line selectable"><i class="icon-sort-by-size"></i><span class="i-class">icon-sort-by-size</span></li>
        <li class="list-item-single-line selectable"><i class="icon-grid"></i><span class="i-class">icon-grid</span></li>
        <li class="list-item-single-line selectable"><i class="icon-view-as-list"></i><span class="i-class">icon-view-as-list</span></li>
        <li class="list-item-single-line selectable"><i class="icon-attachment"></i><span class="i-class">icon-attachment</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new-image"></i><span class="i-class">icon-new-image</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new-event"></i><span class="i-class">icon-new-event</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new-attachment"></i><span class="i-class">icon-new-attachment</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new-message"></i><span class="i-class">icon-new-message</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new"></i><span class="i-class">icon-new</span></li>
        <li class="list-item-single-line selectable"><i class="icon-merge"></i><span class="i-class">icon-merge</span></li>
        <li class="list-item-single-line selectable"><i class="icon-import-export"></i><span class="i-class">icon-import-export</span></li>
        <li class="list-item-single-line selectable"><i class="icon-calendar-event"></i><span class="i-class">icon-calendar-event</span></li>
        <li class="list-item-single-line selectable"><i class="icon-mail"></i><span class="i-class">icon-mail</span></li>
        <li class="list-item-single-line selectable"><i class="icon-edit"></i><span class="i-class">icon-edit</span></li>
        <li class="list-item-single-line selectable"><i class="icon-trash"></i><span class="i-class">icon-trash</span></li>
        <li class="list-item-single-line selectable"><i class="icon-cut"></i><span class="i-class">icon-cut</span></li>
        <li class="list-item-single-line selectable"><i class="icon-copy"></i><span class="i-class">icon-copy</span></li>
        <li class="list-item-single-line selectable"><i class="icon-backspace"></i><span class="i-class">icon-backspace</span></li>
        <li class="list-item-single-line selectable"><i class="icon-clipboard"></i><span class="i-class">icon-clipboard</span></li>
        <li class="list-item-single-line selectable"><i class="icon-image"></i><span class="i-class">icon-image</span></li>
        <li class="list-item-single-line selectable"><i class="icon-read"></i><span class="i-class">icon-read</span></li>
        <li class="list-item-single-line selectable"><i class="icon-remove"></i><span class="i-class">icon-remove</span></li>
        <li class="list-item-single-line selectable"><i class="icon-save"></i><span class="i-class">icon-save</span></li>
        <li class="list-item-single-line selectable"><i class="icon-select-all"></i><span class="i-class">icon-select-all</span></li>
        <li class="list-item-single-line selectable"><i class="icon-split"></i><span class="i-class">icon-split</span></li>
        <li class="list-item-single-line selectable"><i class="icon-undo"></i><span class="i-class">icon-undo</span></li>
        <li class="list-item-single-line selectable"><i class="icon-unread"></i><span class="i-class">icon-unread</span></li>
        <li class="list-item-single-line selectable"><i class="icon-add-group"></i><span class="i-class">icon-add-group</span></li>
        <li class="list-item-single-line selectable"><i class="icon-add-person"></i><span class="i-class">icon-add-person</span></li>
        <li class="list-item-single-line selectable"><i class="icon-cc-bcc"></i><span class="i-class">icon-cc-bcc</span></li>
        <li class="list-item-single-line selectable"><i class="icon-chat"></i><span class="i-class">icon-chat</span></li>
        <li class="list-item-single-line selectable"><i class="icon-forward-2"></i><span class="i-class">icon-forward-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-slideshow"></i><span class="i-class">icon-slideshow</span></li>
        <li class="list-item-single-line selectable"><i class="icon-rotate-right"></i><span class="i-class">icon-rotate-right</span></li>
        <li class="list-item-single-line selectable"><i class="icon-rotate-left"></i><span class="i-class">icon-rotate-left</span></li>
        <li class="list-item-single-line selectable"><i class="icon-globe"></i><span class="i-class">icon-globe</span></li>
        <li class="list-item-single-line selectable"><i class="icon-crop"></i><span class="i-class">icon-crop</span></li>
        <li class="list-item-single-line selectable"><i class="icon-location-marker"></i><span class="i-class">icon-location-marker</span></li>
        <li class="list-item-single-line selectable"><i class="icon-map"></i><span class="i-class">icon-map</span></li>
        <li class="list-item-single-line selectable"><i class="icon-direction"></i><span class="i-class">icon-direction</span></li>
        <li class="list-item-single-line selectable"><i class="icon-share"></i><span class="i-class">icon-share</span></li>
        <li class="list-item-single-line selectable"><i class="icon-send"></i><span class="i-class">icon-send</span></li>
        <li class="list-item-single-line selectable"><i class="icon-reply-all"></i><span class="i-class">icon-reply-all</span></li>
        <li class="list-item-single-line selectable"><i class="icon-reply"></i><span class="i-class">icon-reply</span></li>
        <li class="list-item-single-line selectable"><i class="icon-person"></i><span class="i-class">icon-person</span></li>
        <li class="list-item-single-line selectable"><i class="icon-group"></i><span class="i-class">icon-group</span></li>
        <li class="list-item-single-line selectable"><i class="icon-add-to-queue"></i><span class="i-class">icon-add-to-queue</span></li>
        <li class="list-item-single-line selectable"><i class="icon-download"></i><span class="i-class">icon-download</span></li>
        <li class="list-item-single-line selectable"><i class="icon-fast-forward"></i><span class="i-class">icon-fast-forward</span></li>
        <li class="list-item-single-line selectable"><i class="icon-full-screen"></i><span class="i-class">icon-full-screen</span></li>
        <li class="list-item-single-line selectable"><i class="icon-pin"></i><span class="i-class">icon-pin</span></li>
        <li class="list-item-single-line selectable"><i class="icon-next"></i><span class="i-class">icon-next</span></li>
        <li class="list-item-single-line selectable"><i class="icon-pause"></i><span class="i-class">icon-pause</span></li>
        <li class="list-item-single-line selectable"><i class="icon-pause-2"></i><span class="i-class">icon-pause-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-play"></i><span class="i-class">icon-play</span></li>
        <li class="list-item-single-line selectable"><i class="icon-play-2"></i><span class="i-class">icon-play-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-previous"></i><span class="i-class">icon-previous</span></li>
        <li class="list-item-single-line selectable"><i class="icon-repeat"></i><span class="i-class">icon-repeat</span></li>
        <li class="list-item-single-line selectable"><i class="icon-replay"></i><span class="i-class">icon-replay</span></li>
        <li class="list-item-single-line selectable"><i class="icon-return-from-full-screen"></i><span class="i-class">icon-return-from-full-screen</span></li>
        <li class="list-item-single-line selectable"><i class="icon-brightness-high"></i><span class="i-class">icon-brightness-high</span></li>
        <li class="list-item-single-line selectable"><i class="icon-brightness-auto"></i><span class="i-class">icon-brightness-auto</span></li>
        <li class="list-item-single-line selectable"><i class="icon-bluetooth-searching"></i><span class="i-class">icon-bluetooth-searching</span></li>
        <li class="list-item-single-line selectable"><i class="icon-bluetooth-connected"></i><span class="i-class">icon-bluetooth-connected</span></li>
        <li class="list-item-single-line selectable"><i class="icon-bluetooth"></i><span class="i-class">icon-bluetooth</span></li>
        <li class="list-item-single-line selectable"><i class="icon-brightness"></i><span class="i-class">icon-brightness</span></li>
        <li class="list-item-single-line selectable"><i class="icon-battery"></i><span class="i-class">icon-battery</span></li>
        <li class="list-item-single-line selectable"><i class="icon-add-alarm"></i><span class="i-class">icon-add-alarm</span></li>
        <li class="list-item-single-line selectable"><i class="icon-alarm"></i><span class="i-class">icon-alarm</span></li>
        <li class="list-item-single-line selectable"><i class="icon-key"></i><span class="i-class">icon-key</span></li>
        <li class="list-item-single-line selectable"><i class="icon-upload"></i><span class="i-class">icon-upload</span></li>
        <li class="list-item-single-line selectable"><i class="icon-stop"></i><span class="i-class">icon-stop</span></li>
        <li class="list-item-single-line selectable"><i class="icon-shuffle"></i><span class="i-class">icon-shuffle</span></li>
        <li class="list-item-single-line selectable"><i class="icon-rewind"></i><span class="i-class">icon-rewind</span></li>
        <li class="list-item-single-line selectable"><i class="icon-brightness-medium"></i><span class="i-class">icon-brightness-medium</span></li>
        <li class="list-item-single-line selectable"><i class="icon-call"></i><span class="i-class">icon-call</span></li>
        <li class="list-item-single-line selectable"><i class="icon-camera"></i><span class="i-class">icon-camera</span></li>
        <li class="list-item-single-line selectable"><i class="icon-dashboard"></i><span class="i-class">icon-dashboard</span></li>
        <li class="list-item-single-line selectable"><i class="icon-dial"></i><span class="i-class">icon-dial</span></li>
        <li class="list-item-single-line selectable"><i class="icon-hang-up"></i><span class="i-class">icon-hang-up</span></li>
        <li class="list-item-single-line selectable"><i class="icon-power-auto"></i><span class="i-class">icon-power-auto</span></li>
        <li class="list-item-single-line selectable"><i class="icon-power-none"></i><span class="i-class">icon-power-none</span></li>
        <li class="list-item-single-line selectable"><i class="icon-power"></i><span class="i-class">icon-power</span></li>
        <li class="list-item-single-line selectable"><i class="icon-location-target"></i><span class="i-class">icon-location-target</span></li>
        <li class="list-item-single-line selectable"><i class="icon-location-off"></i><span class="i-class">icon-location-off</span></li>
        <li class="list-item-single-line selectable"><i class="icon-location-searching"></i><span class="i-class">icon-location-searching</span></li>
        <li class="list-item-single-line selectable"><i class="icon-microphone"></i><span class="i-class">icon-microphone</span></li>
        <li class="list-item-single-line selectable"><i class="icon-microphone-off"></i><span class="i-class">icon-microphone-off</span></li>
        <li class="list-item-single-line selectable"><i class="icon-clock"></i><span class="i-class">icon-clock</span></li>
        <li class="list-item-single-line selectable"><i class="icon-camera-video-rotate"></i><span class="i-class">icon-camera-video-rotate</span></li>
        <li class="list-item-single-line selectable"><i class="icon-camera-rotate"></i><span class="i-class">icon-camera-rotate</span></li>
        <li class="list-item-single-line selectable"><i class="icon-storage"></i><span class="i-class">icon-storage</span></li>
        <li class="list-item-single-line selectable"><i class="icon-locked"></i><span class="i-class">icon-locked</span></li>
        <li class="list-item-single-line selectable"><i class="icon-storage-sd"></i><span class="i-class">icon-storage-sd</span></li>
        <li class="list-item-single-line selectable"><i class="icon-screen-lock-portrait"></i><span class="i-class">icon-screen-lock-portrait</span></li>
        <li class="list-item-single-line selectable"><i class="icon-screen-rotate"></i><span class="i-class">icon-screen-rotate</span></li>
        <li class="list-item-single-line selectable"><i class="icon-screen-lock-landscape"></i><span class="i-class">icon-screen-lock-landscape</span></li>
        <li class="list-item-single-line selectable"><i class="icon-call-volume"></i><span class="i-class">icon-call-volume</span></li>
        <li class="list-item-single-line selectable"><i class="icon-unlocked"></i><span class="i-class">icon-unlocked</span></li>
        <li class="list-item-single-line selectable"><i class="icon-new-account"></i><span class="i-class">icon-new-account</span></li>
        <li class="list-item-single-line selectable"><i class="icon-signal"></i><span class="i-class">icon-signal</span></li>
        <li class="list-item-single-line selectable"><i class="icon-signal-2"></i><span class="i-class">icon-signal-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-usb"></i><span class="i-class">icon-usb</span></li>
        <li class="list-item-single-line selectable"><i class="icon-mouse"></i><span class="i-class">icon-mouse</span></li>
        <li class="list-item-single-line selectable"><i class="icon-smartphone"></i><span class="i-class">icon-smartphone</span></li>
        <li class="list-item-single-line selectable"><i class="icon-fries"></i><span class="i-class">icon-fries</span></li>
        <li class="list-item-single-line selectable"><i class="icon-video"></i><span class="i-class">icon-video</span></li>
        <li class="list-item-single-line selectable"><i class="icon-volume-off"></i><span class="i-class">icon-volume-off</span></li>
        <li class="list-item-single-line selectable"><i class="icon-volume-adjust"></i><span class="i-class">icon-volume-adjust</span></li>
        <li class="list-item-single-line selectable"><i class="icon-airplane"></i><span class="i-class">icon-airplane</span></li>
        <li class="list-item-single-line selectable"><i class="icon-airplane-2"></i><span class="i-class">icon-airplane-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-alert"></i><span class="i-class">icon-alert</span></li>
        <li class="list-item-single-line selectable"><i class="icon-alert-2"></i><span class="i-class">icon-alert-2</span></li>
        <li class="list-item-single-line selectable"><i class="icon-laptop"></i><span class="i-class">icon-laptop</span></li>
        <li class="list-item-single-line selectable"><i class="icon-desktop"></i><span class="i-class">icon-desktop</span></li>
        <li class="list-item-single-line selectable"><i class="icon-joystick"></i><span class="i-class">icon-joystick</span></li>
        <li class="list-item-single-line selectable"><i class="icon-headphones"></i><span class="i-class">icon-headphones</span></li>
        <li class="list-item-single-line selectable"><i class="icon-headphones-mic"></i><span class="i-class">icon-headphones-mic</span></li>
        <li class="list-item-single-line selectable"><i class="icon-keyboard"></i><span class="i-class">icon-keyboard</span></li>
        <li class="list-item-single-line selectable"><i class="icon-up-button"></i><span class="i-class">icon-up-button</span></li>
      </div>
    </div>
  </div>

  <script src="../dist/fries.min.js"></script>

  <script src="js/fingerblast.js"></script>

  <script src="js/example.js"></script>
</body>
</html>